import { useContext } from "react";
import GanttContext from "../../context";
import { getTaskBarPosition } from "../../helpers/utils";
import TaskBar from "./task-bar";
import type { RenderItemProps } from "../../components/virtual-list";
import { GanttConsts } from "../../constants";
import { ChevronDown, ChevronRight } from "../../components/icons";

export default function Task({ task }: RenderItemProps) {
  const {
    taskMode,
    tasksStart,
    hideTaskTable,
    containerWidth,
    ganttWidth,
    toggleExpand,
  } = useContext(GanttContext);
  const [taskWidth, taskLeft] = getTaskBarPosition(
    taskMode,
    tasksStart,
    task.start,
    task.end
  );

  const handleToggleExpand = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (task.children && task.children.length > 0) {
      toggleExpand(task.id);
    }
  };
  return (
    <div
      style={{ height: `${GanttConsts.ITEM_HEIGHT}px` }}
      className="flex items-center"
    >
      {hideTaskTable ? null : (
        <div
          style={{
            width: `${GanttConsts.TASKTABLE_WIDTH}px`,
            height: `${GanttConsts.ITEM_HEIGHT}px`,
          }}
          className="flex text-xm"
        >
          <div
            className="flex-1 flex items-center truncate"
            style={{ paddingLeft: `${8 + task.level * 20}px` }}
          >
            {task.children && task.children.length > 0 ? (
              <button
                onClick={handleToggleExpand}
                className="mr-2 p-1 text-gray-400 hover:text-gray-500 hover:cursor-pointer"
              >
                {task.expanded ? (
                  <ChevronDown size={16} />
                ) : (
                  <ChevronRight size={16} />
                )}
              </button>
            ) : (
              <div className="w-6 mr-2" /> // 占位符，保持对齐
            )}
            <span className="truncate text-sm">{task.name}</span>
          </div>
          <div className="w-24 flex items-center text-sm">
            {task.start.format("YYYY-MM-DD")}
          </div>
          <div className="w-24 flex items-center text-sm">
            {task.end.format("YYYY-MM-DD")}
          </div>
          <div className="w-24 flex justify-center items-center">
            <div
              className="flex justify-center items-center rounded-sm text-center w-14 h-6 text-white text-xs"
              style={{ backgroundColor: task.backgroundColor }}
            >
              {task.progress}%
            </div>
          </div>
        </div>
      )}
      <div
        className="flex"
        style={{
          width: `${
            containerWidth - (hideTaskTable ? 0 : GanttConsts.TASKTABLE_WIDTH)
          }px`,
        }}
      >
        <div
          className="relative"
          style={{
            width: `${ganttWidth}px`,
            height: `${GanttConsts.ITEM_HEIGHT}px`,
          }}
        >
          <TaskBar taskLeft={taskLeft} taskWidth={taskWidth} task={task} />
        </div>
      </div>
    </div>
  );
}
